<template>
  <div class="carousel-board">
    <div class="carousel-header" v-if="title">
      <div>{{ title }}</div>
    </div>
    <div class="carousel-table">
      <scrollTable v-bind="$attrs" v-on="$attrs">
        <!-- 转发所有插槽内容到子组件 -->
        <template v-slot:[`col-${col.name}`]="row" v-for="(col, idx) in $attrs.columns" :key="idx">
          <slot :name="`col-${col.name}`" v-bind="row"></slot>
        </template>
      </scrollTable>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import scrollTable from './scrollTable.vue';

export default defineComponent({
  name: 'carouselBoard',
  props: {
    // 标题
    title: {
      type: String,
      default: ''
    }
  },
  components: {
    scrollTable
  },
  data () {
    return {

    }
  },
  mounted () {

  }
})
</script>

<style lang="scss">
.carousel-board {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 0 3px blue;
  display: flex;
  flex-direction: column;
  background-color: rgba(6, 30, 93, 0.5);
  border-top: 2px solid rgba(1, 153, 209, .5);
  // margin-bottom: 8px;

  .carousel-header {
    font-size: 18px;
    font-weight: bold;
    padding: 10px;
    display: flex;
    height: 42px;
  }

  .carousel-table {
    height: calc(100% - 42px);
  }
}
</style>
